<div id="content-wrap" class="container" ng-controller="ContactCtrl">
    <!-- PAGE HEADER -->
    <div class="page-header"><h1>Contact Us</h1></div>

    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
            <label>Name*</label>
            <input type="text" name="name" class="form-control" ng-model="user.name" required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
        </div>

        <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="user.email" required>
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
        </div>

        <!-- SUBJECT -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.subject.$invalid && !userForm.subject.$pristine }">
            <label>Subject</label>
            <input type="text" name="subject" class="form-control" ng-model="user.subject" required>
            <p ng-show="userForm.subject.$invalid && !userForm.subject.$pristine" class="help-block">Enter a valid subject.</p>
        </div>

        <!-- MESSAGE -->
        <div class="form-group">
            <label>Message</label>
            <textarea type="text" name="message" ng-pattern="/^[a-zA-Z0-9 @_.\n,]*$/" class="form-control" ng-model="user.message" style="height: 100px;" required></textarea>
            <p ng-show="userForm.message.$invalid && !userForm.message.$pristine" class="help-block">Enter message without special characters.</p>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>

    </form>
</div>